@extends('WShop::layout')
@section('content')
    @include('WShop::public.header')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">
            <div class="mui-table-view mui-table-view-chevron mui-dingdan mui-bottom">

                <div class="mui-zhuda">

                    <div class="mui-dingdan-list">
                        @if($list->isNotEmpty())
                            <ul class="mui-list-unstyled mui-clearfix" id="pull-load">
                                @foreach($list as $item)
                                    <li class="bg-fff">
                                        <div class="dingdan-list-header">结算日期：{{$item->created_at}}</span>
                                        </div>

                                        <div class="flex">
                                            <div class="flex-right" style="width: 100%;">
                                                <div>
                                                    <div style="padding-left: 10px;color: #999;">{{get_change(42)}}：{{$item->bonus42}}</div>
                                                    <div style="padding-left: 10px;color: #999;">{{get_change(43)}}：{{$item->bonus43}}</div>
                                                    <div style="padding-left: 10px;color: #999;">{{get_change(44)}}：{{$item->bonus44}}</div>
                                                    <div style="padding-left: 10px;color: #999;">{{get_change(45)}}：{{$item->bonus45}}</div>
                                                    <div style="padding-left: 10px;color: #999;">{{get_change(46)}}：{{$item->bonus46}}</div>
                                                    <div style="padding-left: 10px;color: #999;">{{get_change(47)}}：{{$item->bonus47}}</div>
                                                    <div style="padding-left: 10px;color: #999;">{{get_change(48)}}：{{$item->bonus48}}</div>
                                                    <div style="padding-left: 10px;color: #999;">{{get_change(49)}}：{{$item->bonus49}}</div>
                                                    <div style="padding-left: 10px;color: #999;">{{get_change(50)}}：{{$item->bonus50}}</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mui-text-right"></div>
                                        <div class="mui-text-right1">
                                            <a href="javascript:void (0)" class="mui-btn mui-disabled">总计：{{$item->bonus}}</a>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>

                        @else
                            <div style="height: 110px;"></div>
                            <div class="mui-text-center">
                                <img src="{{asset(config('mall.wap_assets1').'/images/empty.png')}}" alt="" width="200">
                                <p style="margin-top: 50px;"><a href="javascript:void(0);" style="color: #fff;border: 1px solid #8a96a2;padding: 8px 24px;border-radius: 16px;background: #8a96a2;">暂无数据</a></p>
                            </div>

                        @endif
                    </div>

                </div>

            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar',['active'=>'user'])
@endsection
@push('scripts')

    <script src="{{asset(config('view.plugin').'/other/day.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/pull-loading.js')}}"></script>
    <script>

        pullLoading.tpl = '<li class="bg-fff">\n' +
            '<div class="dingdan-list-header">结算日期：{%create_at%} </div>' +
            '{%goods_item%}<div class="mui-text-right"></div>\n' +
            '<div class="mui-text-right1"> <a href="javascript:void (0)" class="mui-btn mui-disabled">总计：{%fact_bonus%}</a></div>\n' +
            '</li>';

        pullLoading.load(function (data) {
            var goodsItemTpl = '<div class="flex">' +
                '<div class="flex-right" style="width: 100%;">' +
                '<div><div style="padding-left: 10px;color: #999;">{{get_change(42)}}：{%bonus42%}</div>\n' +
                '<div style="padding-left: 10px;color: #999;">{{get_change(43)}}：{%bonus43%}</div>\n' +
                '<div style="padding-left: 10px;color: #999;">{{get_change(44)}}：{%bonus44%}</div>\n' +
                '<div style="padding-left: 10px;color: #999;">{{get_change(45)}}：{%bonus45%}</div>\n' +
                '<div style="padding-left: 10px;color: #999;">{{get_change(46)}}：{%bonus46%}</div>\n' +
                '<div style="padding-left: 10px;color: #999;">{{get_change(47)}}：{%bonus47%}</div>\n' +
                '<div style="padding-left: 10px;color: #999;">{{get_change(48)}}：{%bonus48%}</div>\n' +
                '<div style="padding-left: 10px;color: #999;">{{get_change(49)}}：{%bonus49%}</div>\n' +
                '<div style="padding-left: 10px;color: #999;">{{get_change(50)}}：{%bonus50%}</div>\n' +
                '</div></div></div>';

            var len = data.length;
            for (var i=0; i<len; i++){

                var goodsItem = '';

                    goodsItem += goodsItemTpl
                        .replace('{%bonus42%}',data[i]['bonus42'])
                        .replace('{%bonus43%}',data[i]['bonus43'])
                        .replace('{%bonus44%}',data[i]['bonus44'])
                        .replace('{%bonus45%}',data[i]['bonus45'])
                        .replace('{%bonus46%}',data[i]['bonus46'])
                        .replace('{%bonus47%}',data[i]['bonus47'])
                        .replace('{%bonus48%}',data[i]['bonus48'])
                        .replace('{%bonus49%}',data[i]['bonus49'])
                        .replace('{%bonus50%}',data[i]['bonus50'])

                var itemTpl =pullLoading.tpl;

                itemTpl = itemTpl.replace('{%create_at%}',dayjs(data[i]['created_at']*1000).format('YYYY-MM-DD HH:mm:ss'))
                    .replace('{%goods_item%}',goodsItem)
                    .replace('{%fact_bonus%}',data[i]['bonus']);

                $("#pull-load").append(itemTpl);
                orderOpt();
            }
        })
    </script>
@endpush